<template>
	<view class="detailContainer">
		<!-- 导航栏 -->
		<view class="header">
			<!-- 跳转tabbar页面，必须设置open-type="switchTab" -->
			<navigator open-type="switchTab" url="/pages/index/index">
				<view class="icon">
					<i class="iconfont icon-shouye2"></i>
				</view>
			</navigator>
			<image class="logo" src="../../static/images/logo.png" mode=""></image>
			<view class="icon">
				<i class="iconfont icon-gouwuche2"></i>
			</view>
		</view>
		<!-- 内容区 -->
		<scroll-view class="content" scroll-y="true" >
			<image class="detailImg" :src="good.listPicUrl" mode=""></image>
			<view class="tag">{{good.promotionDesc}}</view>
			<text class="price">￥ {{good.retailPrice }}</text>
			<view class="info">
				{{good.name}}
			</view>
			<!-- 准备内容 -->
			<view class="list" style="margin-left: 5%;font-size: 28upx;line-height: 50upx;">
				<view class="listItem">1) 100%桑蚕丝填充，丝丝精粹不掺杂</view>
				<view class="listItem">2) 创新井字拉网工艺，桑蚕丝不易黏连结块</view>
				<view class="listItem">3) 两种面料可选，贡缎手感细腻，竹棉清爽透气</view>
				<view class="listItem">4) AB双面设计，多种活性印花不易褪色</view>
				</view>
		</scroll-view>
			<!-- 底部导航 -->
			<view class="detailFooter">
				<img class="icon" src="http://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/detail-kefu-d10f0489d2.png?imageView&type=webp" alt="">
				<view class="btn buyNow">立即购买</view>
				<view class="btn addShopCart" @click="addShopCart">加入购物车</view>
			</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	// 多个方法  用methods watch computed 
	import {mapMutations} from 'vuex'
	export default {
		data() {
			return {
				good:{}
			};
		},
		async mounted() {
			let {goodId} = this.$mp.query
			let good = await request('/getGoodDetail',{
				id:goodId
			})
			this.good = good
		},
		methods:{
			...mapMutations(["addShopItemMutation"]),
			addShopCart(){
				 //已经有good，不需要发请求，所以不用action
				//触发增加商品的mutation
				// this.$store.commit()
				this.addShopItemMutation(this.good)
			}
		}
	}
</script>

<style lang="stylus">
	.detailContainer
		.header
			display flex
			height 88upx
			line-height 88upx
			justify-content space-between
			align-items: center
			padding 0 16upx
			box-shadow 2upx 2upx 2upx #EEEEEE
			box-sizing border-box
			.logo
				width 180upx
				height 60upx
			.icon
				.iconfont
					font-size 60upx
		.content
			width 100%
			height calc(100vh - 188upx - var(--window-top) - var(--window-bottom))
			.detailImg
				width 100%
				height 600upx
			.tag
				width 90%
				margin 20upx auto
				height 120upx
				line-height 120upx
				text-align center
				font-size 38upx
				color #fff
				border-radius 30upx
				background-color #c73805
			.price
				margin-left: 5%
				width 90%
				font-size 60upx
				color  #c73805
			.info
				margin-left: 5%
				font-size 30upx
				color #666
		.detailFooter
			display flex
			height 100upx
			line-height 100upx
			text-align center
			align-items center
			.icon
				width 80upx
				height 100%
				padding 10upx 40upx
				flex-grow 1
				box-sizing border-box
				border 1px solid #EEEEEE
			.btn
				height 100%
				border 1px solid #EEEEEE
				flex-grow 2
				font-size 30upx
				box-sizing border-box
				&.addShopCart
					color #fff
					background-color #c73805
				
				
</style>
